import { NavBar, Modal } from 'antd-mobile'
import React, { useRef, useState } from 'react'
import {
    Form,
    Input,
    Button,
} from 'antd-mobile'

import img from '../img/sfz.png'
import { orcup } from '../request/api'
function Perfoem() {
    let [data, setdata] = useState()
    // 表单
  const [form] = Form.useForm()
    const [visible, setVisible] = useState(false)
    const onFinish = (values) => {
              
    }
    let [flag,setflag]=useState(false)
    let toup = () => {
        setflag(false)
        kk.current.click()
        kk.current.addEventListener('change', (e) => {
            setVisible(true)
            // 获取信息
            let files = e.target.files[0]
            console.log('e', files)
            if (files.type !== 'image/png') {
                alert('选择的文件不合适')
            }
            // 定义一个表单数据
            let filedata = new FormData()
            filedata.append('file', files)
        //    调用接口
                 orcup(filedata).then(res => {
                console.log('oo', res)
                if(res.data.code==200){
                       setdata(res.data.data)
                       form.setFieldsValue({...res.data.data,utype:'成年人',ztype:'身份证',phone:'19283920097'})
                }
            })
            
           
        })
    }
    let toclose = () => {
        setVisible(false)
        setflag(true)
    }
    let kk = useRef()
    return (
        <div>
            <Modal
                visible={visible}
                content={
                    <img src={img}></img>
                }
                closeOnAction
                onClose={() => toclose()}
                actions={[
                    {
                        key: 'confirm',
                        text: '识别',
                    },
                ]}
            />
            <input type='file' ref={kk} style={{ display: 'none' }}></input>
            <NavBar>新增乘客</NavBar>
            <div style={{ margin: '10px' }}>
                <div onClick={() => toup()} style={{
                    height: '40px',
                    lineHeight: '40px', textAlign: 'center', margin: '10px'
                }}>
                    扫描身份证
                </div>
                {/* 表单 */}
                <Form
                 onFinish={onFinish}
                   form={form}
                    layout='horizontal'
                    footer={
                        <Button block type='submit' color='primary' size='large'>
                            提交
                        </Button>
                    }
                >

                    <Form.Item
                        name='utype'
                        label='乘客类型'
                        rules={[{ required: true, message: '乘客类型不能为空' }]}
                    >
                        <Input onChange={console.log} placeholder='请输入乘客类型' />
                    </Form.Item>
                    <Form.Item
                        name='name'
                        label='姓名'
                        rules={[{ required: true, message: '姓名不能为空' }]}
                    >
                        <Input onChange={console.log} placeholder='请输入姓名' />
                    </Form.Item>
                    <Form.Item
                        name='ztype'
                        label='证件类型'
                        rules={[{ required: true, message: '证件类型不能为空' }]}
                    >
                        <Input onChange={console.log} placeholder='请输入证件类型' />
                    </Form.Item>
                    <Form.Item
                        name='code'
                        label='证件号码'
                        rules={[{ required: true, message: '证件号码不能为空' }]}
                    >
                        <Input onChange={console.log} placeholder='请输入证件号码' />
                    </Form.Item>
                    <Form.Item
                        name='phone'
                        label='手机号'
                        rules={[{ required: true, message: '手机号不能为空' }]}
                    >
                        <Input onChange={console.log} placeholder='请输入手机号' />
                    </Form.Item>

                </Form>

            </div>
        </div>
    )
}

export default Perfoem
